/**
 * 响应式Hooks使用示例
 *
 * 演示所有响应式Hooks的实际用法
 */

import React from 'react';
import { Card, Tag, Space, Divider } from 'antd';
import {
  useBreakpoint,
  useMediaQuery,
  useDeviceDetect,
  useOrientation,
  useViewport
} from '../hooks';

export const ResponsiveHooksExample: React.FC = () => {
  // 1. useBreakpoint - 获取当前断点
  const breakpoint = useBreakpoint();

  // 2. useMediaQuery - 自定义媒体查询
  const isSmallScreen = useMediaQuery('(max-width: 767px)');
  const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const isReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

  // 3. useDeviceDetect - 设备检测
  const device = useDeviceDetect();

  // 4. useOrientation - 屏幕方向
  const orientation = useOrientation();

  // 5. useViewport - 视口信息
  const viewport = useViewport();

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">响应式Hooks演示</h1>

      {/* 断点信息 */}
      <Card title="1. useBreakpoint" className="mb-4">
        <Space>
          <span>当前断点:</span>
          <Tag color={breakpoint === 'mobile' ? 'blue' : breakpoint === 'tablet' ? 'green' : 'orange'}>
            {breakpoint}
          </Tag>
        </Space>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`const breakpoint = useBreakpoint();
// 返回: '${breakpoint}'

// 根据断点调整布局
const columns = breakpoint === 'mobile' ? 1
  : breakpoint === 'tablet' ? 2
  : 3;`}
        </pre>
      </Card>

      {/* 媒体查询 */}
      <Card title="2. useMediaQuery" className="mb-4">
        <Space direction="vertical">
          <div>
            <span>小屏幕 (≤767px): </span>
            <Tag color={isSmallScreen ? 'success' : 'default'}>
              {isSmallScreen ? '是' : '否'}
            </Tag>
          </div>
          <div>
            <span>暗黑模式: </span>
            <Tag color={isDarkMode ? 'success' : 'default'}>
              {isDarkMode ? '启用' : '禁用'}
            </Tag>
          </div>
          <div>
            <span>减少动画: </span>
            <Tag color={isReducedMotion ? 'success' : 'default'}>
              {isReducedMotion ? '是' : '否'}
            </Tag>
          </div>
        </Space>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`const isSmallScreen = useMediaQuery('(max-width: 767px)');
const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

// 根据媒体查询条件渲染
{isSmallScreen ? <MobileView /> : <DesktopView />}`}
        </pre>
      </Card>

      {/* 设备检测 */}
      <Card title="3. useDeviceDetect" className="mb-4">
        <Space direction="vertical" className="w-full">
          <div className="grid grid-cols-2 gap-2">
            <span>移动设备:</span>
            <Tag color={device.isMobile ? 'success' : 'default'}>
              {device.isMobile ? '是' : '否'}
            </Tag>

            <span>平板:</span>
            <Tag color={device.isTablet ? 'success' : 'default'}>
              {device.isTablet ? '是' : '否'}
            </Tag>

            <span>桌面:</span>
            <Tag color={device.isDesktop ? 'success' : 'default'}>
              {device.isDesktop ? '是' : '否'}
            </Tag>

            <span>iOS:</span>
            <Tag color={device.isIOS ? 'success' : 'default'}>
              {device.isIOS ? '是' : '否'}
            </Tag>

            <span>Android:</span>
            <Tag color={device.isAndroid ? 'success' : 'default'}>
              {device.isAndroid ? '是' : '否'}
            </Tag>

            <span>触摸支持:</span>
            <Tag color={device.hasTouch ? 'success' : 'default'}>
              {device.hasTouch ? '是' : '否'}
            </Tag>

            <span>浏览器:</span>
            <Tag>{device.browser}</Tag>

            <span>操作系统:</span>
            <Tag>{device.os}</Tag>
          </div>
        </Space>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`const device = useDeviceDetect();

// iOS特殊处理
if (device.isIOS) {
  // 处理iOS滚动问题
  document.body.style.webkitOverflowScrolling = 'touch';
}`}
        </pre>
      </Card>

      {/* 屏幕方向 */}
      <Card title="4. useOrientation" className="mb-4">
        <Space>
          <span>屏幕方向:</span>
          <Tag color={orientation === 'portrait' ? 'blue' : 'orange'}>
            {orientation === 'portrait' ? '竖屏' : '横屏'}
          </Tag>
        </Space>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`const orientation = useOrientation();
// 返回: '${orientation}'

// 横屏提示
if (orientation === 'landscape') {
  return <div>请竖屏使用以获得最佳体验</div>;
}`}
        </pre>
      </Card>

      {/* 视口信息 */}
      <Card title="5. useViewport" className="mb-4">
        <Space direction="vertical" className="w-full">
          <div className="grid grid-cols-2 gap-2">
            <span>宽度:</span>
            <Tag>{viewport.width}px</Tag>

            <span>高度:</span>
            <Tag>{viewport.height}px</Tag>

            <span>缩放比例:</span>
            <Tag>{viewport.scale}</Tag>

            <span>垂直滚动:</span>
            <Tag>{viewport.scrollY}px</Tag>

            <span>水平滚动:</span>
            <Tag>{viewport.scrollX}px</Tag>

            <span>正在滚动:</span>
            <Tag color={viewport.isScrolling ? 'processing' : 'default'}>
              {viewport.isScrolling ? '是' : '否'}
            </Tag>
          </div>
        </Space>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`const viewport = useViewport();

// 回到顶部按钮
const showBackToTop = viewport.scrollY > 300;

// 滚动监听
useEffect(() => {
  if (viewport.isScrolling) {
    console.log('用户正在滚动');
  }
}, [viewport.isScrolling]);`}
        </pre>
      </Card>

      {/* 综合示例 */}
      <Card title="综合示例：响应式布局" className="mb-4">
        <div
          className={`
            p-4 rounded border-2
            ${breakpoint === 'mobile' ? 'border-blue-500' : ''}
            ${breakpoint === 'tablet' ? 'border-green-500' : ''}
            ${breakpoint === 'desktop' ? 'border-orange-500' : ''}
          `}
        >
          <h3 className="font-bold mb-2">
            当前布局: {breakpoint === 'mobile' ? '单列' : breakpoint === 'tablet' ? '双列' : '三列'}
          </h3>
          <div
            className={`
              grid gap-4
              ${breakpoint === 'mobile' ? 'grid-cols-1' : ''}
              ${breakpoint === 'tablet' ? 'grid-cols-2' : ''}
              ${breakpoint === 'desktop' ? 'grid-cols-3' : ''}
            `}
          >
            {[1, 2, 3, 4, 5, 6].map(num => (
              <div key={num} className="bg-gray-100 p-4 rounded text-center">
                卡片 {num}
              </div>
            ))}
          </div>
        </div>
        <Divider />
        <pre className="bg-gray-100 p-2 rounded">
{`function ResponsiveGrid() {
  const breakpoint = useBreakpoint();
  const columns = breakpoint === 'mobile' ? 1
    : breakpoint === 'tablet' ? 2
    : 3;

  return (
    <div className={\`grid grid-cols-\${columns} gap-4\`}>
      {items.map(item => <Card key={item.id} {...item} />)}
    </div>
  );
}`}
        </pre>
      </Card>
    </div>
  );
};

export default ResponsiveHooksExample;
